<template>
    <div class="cloud-stock-list">
        <c-title text="查看明细"></c-title>
        <div class="item" v-for="item in list" :key="item.id">
            <div class="space-between flex mb-12" style='font-size: 0.9375rem;'>
                <span >{{ item.change_name }}</span><span class='blod' :class="{'cE32323':item.nums>0}">{{ item.nums }}</span>
            </div>
            <div class="space-between flex">
                <span style="font-size: 0.75rem; color: #999;">{{ item.created_at }}</span>
                <div class="flex align-items-center" :class="{'remark':item.change_type==1}">
                    <template v-if="item.change_type == 1">{{ item.remark }}</template>
                    <template v-if="item.change_type == 2">
                        <span class="c999 fz24">转让人:</span>
                        <img class='ml8 mr8' :src="item.give_nickname"/>
                        <span class="fz24">{{ item.give_avatar }}</span>
                    </template>
                    <template v-if="item.change_type == 3">
                        <span  class="c999 fz24">受让人:</span>
                        <img class='ml8 mr8' :src="item.rec_avatar"/>
                        <span class="fz24">{{ item.rec_nickname }}</span>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { scrollMixin } from '../../../utils/mixin';
export default {
    mixins: [scrollMixin],
    data() {
        return {
            list: [],
            page: 1,
            total_page: 1,
            isLoadMore: false,

        };
    },
    activated() {
        this.isLoadMore = false;
        this.getData({ stock_id: this.$route.params.stock_id })
    },
    methods: {
        getMoreData() {
            if (this.page >= this.total_page) {
                return;
            }
            this.isLoadMore = false;
            let json = {
                stock_id: this.$route.params.stock_id,
                page: this.page + 1
            };
            this.getData(json)
        },
        async getData(json) {
            let { result, msg, data: { data, current_page, last_page } } = await $http.get('plugin.store-cloud-stock.frontend.controllers.home.logs', json, "loading");
            this.isLoadMore = true;
            if (result == 1) {
                this.page = current_page;
                this.total_page = last_page;
                if (current_page == 1) {
                    this.list = data || []
                } else {
                    this.list = this.list.concat(data);
                }
            } else {
                this.$toast(msg);
            }
        },
    }
};
</script>

<style scoped lang="scss">
.cloud-stock-list {
  padding: 0.875rem;

  .fz24 {
    font-size: 0.75rem;
  }

  .ml8 {
    margin-left: 0.25rem;
  }

  .mr8 {
    margin-right: 0.25rem;
  }

  .c999 {
    color: #999;
  }

  .blod {
    font-weight: bold;
  }

  .remark {
    color: #999;
    font-size: 0.75rem;
  }

  .align-items-center {
    align-items: center;
  }

  img {
    margin: 0;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 100px;
  }

  .cE32323 {
    color: #e32323;
  }

  .mb-12 {
    margin-bottom: 0.75rem;
  }

  .flex {
    display: flex;
  }

  .space-between {
    justify-content: space-between;
  }

  .item {
    padding: 0.8125rem;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 1);
    margin-bottom: 0.5rem;
  }
}
</style>
